<template>
	<view>

		<u-tabs :list="list" :is-scroll="false" bg-color="" :current="current" @change="change"
			active-color='#48aea8'></u-tabs>
			
		<!-- 挂号缴费卡片列表 -->
		<view class="pad-16r">
			<view class="" v-if="showPageOne===1">
				<view class="pad-10-0">
					<u-steps :list="numList" active-color='#48aea8' :current="currpage-1"></u-steps>
				</view>
				<view class="" v-if='currpage===1'>
					<view class="section-card">
						<view class="pad-10-0">
							病案速递适用于本人、患儿父母申请，未保障您的申请顺利通过，请在出院<text class="color-red">{{day}}个工作日</text>后申请
						</view>
					</view>

					<view class="section-card">
						<view class="pad-10-0">
							您正在申请 <text class="color-red"> {{currentHospitalInfo.name||'xx医院'}}</text>【病案邮寄】服务
						</view>
					</view>

					<view class="info-ems">
						<view class="pad-10-0"><strong>请完善基本信息</strong></view>
						<view class="">
							<view class="pad-10">
								<u-row gutter="12">
									<u-col span="4">
										<view class="demo-layout bg-purple">申请类型</view>
									</u-col>
									<u-col span="8" text-align='right' class="text-right">
										<u-radio-group class="radio-item" v-model="value" @change="radioGroupChange">
											<u-radio @change="radioChange" v-for="(item, index) in radioList"
												:key="index" :name="item.name">
												{{item.name}}
											</u-radio>
										</u-radio-group>
									</u-col>

								</u-row>
							</view>

							<!-- <u-field v-model="patName" label="收件姓名" input-align="right" placeholder="请输入收件姓名"></u-field> -->
							<!-- <u-field v-model="idCard" label="身份证号" input-align="right" placeholder="请输入身份证号"></u-field> -->
							<!-- <u-field v-model="regNo" label="登记号" input-align="right" placeholder="请输入登记号"></u-field> -->
							<!-- <u-field v-model="enterTime" label="入院时间" input-align="right"
								placeholder="请输入入院时间"></u-field>
							<u-field v-model="outTime" label="出院时间" input-align="right" placeholder="请输入出院时间"></u-field>
							 -->
							 <!-- <u-field v-model="mobile" label="联系电话" input-align="right" placeholder="请输入联系电话"></u-field> -->
							<!-- <u-field v-model="code" label="验证码" input-align="right" placeholder="请输入验证码"></u-field> -->
						</view>
					</view>

					<!-- <view class="info-ems mar-10-0">
						<view class="pad-10-0"> <strong>请完善代理人信息</strong></view>
						<view class="">
							<u-field @click="relate=true" label-width='150' v-model="currRelate" :disabled="true"
								label="与患者关系" input-align='right' placeholder="请选择与患者关系" right-icon="arrow-right">
							</u-field>
						</view>
						<view class="">
							<u-field v-model="porxyName" label="代办人姓名" label-width=200 input-align="right"
								placeholder="请输入代办人姓名"></u-field>
							<u-field v-model="porxyId" label="代办人身份证号" label-width=200 input-align="right"
								placeholder="请输入代办人身份证号"></u-field>
							<u-field v-model="porxyTel" label="代办人电话" label-width=200 input-align="right"
								placeholder="请输入代办人电话"></u-field>
						</view>
					</view> -->
					<view class="pad-10-0">
						<button class="record-btn" @click="toNextPage(2)">下一步</button>
					</view>
				</view>

				<view class="" v-if='currpage===2'>

					<view class="section-card">
						<view class="pad-10-0"> <strong>申请内容</strong></view>
						<view class="choice-box">
							<view class="choice" :class="item.active?'active':''" v-for="(item, index) in applyList"
								:key="index" @click="choiceActive(item)">{{item.name}}</view>
						</view>
					</view>
					<view class="section-card">
						<view class="pad-10-0"> <strong>申请格式</strong></view>
						<view class="">
							<u-radio-group class="radio-item" v-model="value" @change="radioGroupChange">
								<u-radio @change="radioChange" v-for="(item, index) in radioList2" :key="index"
									:name="item.name">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view>
						<view class="pad-10-0"> <strong>复印份数</strong></view>
						<view class="">
							<u-number-box v-model="value" @change="valChange"></u-number-box>
						</view>
					</view>
					<view class="section-card">
						<view class="pad-10-0"> <strong>备注说明</strong></view>
						<view class="">
							<view class="">
								<textarea class="textarea" v-model="formInfo.memo" placeholder="请输入" :maxlength="200" />
								<view class="textarea-count">{{ formInfo.memo.length }}/200</view>
							</view>
						</view>

					</view>
					<view class="pad-10-0">
						<button class="record-btn" @click="toNextPage(3)">下一步</button>
					</view>
				</view>


				<view class="" v-if='currpage===3'>

					<view class="section-card">
						<view class="pad-10-0"> <strong>患者身份证照片</strong></view>
						<view class="pad-10-0">
							<u-row gutter="12">
								<u-col span="6">
									<u-image mode="widthFix" src="/static/images/imgs/idfront.png"></u-image>
									<view class="text-center pad-5-0">身份证正面照</view>
								</u-col>
								<u-col span="6">
									<u-image mode="widthFix" src="/static/images/imgs/idback.png"></u-image>
									<view class="text-center pad-5-0">身份证背面照</view>
								</u-col>
								<u-col span="6">
									<u-image mode="widthFix" src="/static/images/imgs/idfront.png"></u-image>
									<view class="text-center pad-5-0">手持身份证正面照</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<view class="section-card">
						<view class="pad-10-0"> <strong>代理人身份证照片</strong></view>
						<view class="pad-10-0">
							<u-row gutter="12">
								<u-col span="6">
									<u-image mode="widthFix" src="/static/images/imgs/idfront.png"></u-image>
									<view class="text-center pad-5-0">身份证正面照</view>
								</u-col>
								<u-col span="6">
									<u-image mode="widthFix" src="/static/images/imgs/idback.png"></u-image>
									<view class="text-center pad-5-0">身份证背面照</view>
								</u-col>
								<u-col span="6">
									<u-image mode="widthFix" src="/static/images/imgs/idfront.png"></u-image>
									<view class="text-center pad-5-0">手持身份证正面照</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<view class="pad-10-0">
						<button class="record-btn" @click="toNextPage(4)">下一步</button>
					</view>
				</view>


				<view class="" v-if='currpage===4'>

					<view class="section-card">
						<view class="pad-10-0"> <strong>领取方式</strong></view>
						<view class="pad-10-0">
							<u-radio-group class="radio-item" v-model="value" @change="radio3GroupChange">
								<u-radio @change="radio3Change" v-for="(item, index) in radioList3" :key="index"
									:name="item.name">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view>

					</view>
					<view class="section-card">
						<view class="info-ems">
							<view class="pad-10-0"><strong>快递信息</strong></view>
							<view class="">
								<u-form-item label=""><u-input placeholder='姓名' /></u-form-item>
								<u-form-item label=""><u-input placeholder='联系电话' /></u-form-item>
								<u-form-item label=""><u-input placeholder='请选择邮寄地址' /></u-form-item>
								<u-form-item label=""><u-input placeholder='请输入详细地址信息' /></u-form-item>
							</view>
						</view>
					</view>
					<!-- <view class="section-card">
						<view class="pad-10-0"> <strong>复印内容</strong></view>

						<view class="pad-10-0">
							<view class="choice-box">
								<view class="choice active">病历首页</view>
								<view class="choice active">入院记录</view>
							</view>
						</view>
					</view> -->

					<view class="section-card">
						<view class="pad-10-0"> <strong>费用金额</strong></view>
						<view class="">

							<u-field v-model="cost" label="病历复印件预付款" disabled=true label-width=220 input-align="right"
								placeholder="¥ 125" value=''></u-field>
							<u-field v-model="prcie" label="运费" disabled=true label-width=220 input-align="right"
								placeholder="¥ 15" value=''></u-field>

						</view>
						<view class="amount text-right pad-10">费用合计：<text class="prcie">140</text></view>
					</view>
					
					<view class="section-card">
						<view class="pad-10-0"> <strong>注意事项</strong></view>
						<view class="pad-10-0">
							支付复印费用预付款<text class="color-red">140</text>元,根据实际打印张数计算价格后多退少补；每张复印纸为 0.5 / 张；
						</view>
					</view>

					<view class="pad-10-0">
						<button class="record-btn" @click="toNextPage(4)">确认提交并支付</button>
					</view>
				</view>

				<u-select v-model="relate" :list="formInfo.relate" @confirm="confirm($event,'currRelate')"></u-select>
				<u-select v-model="passType" :list="formInfo.passType"
					@confirm="confirm($event,'currPassType')"></u-select>
			</view>


			<view class="" v-if="showPageOne===2">
				<view class="section-card" v-for="(item, index) in orderList" :key="index">
					<view class="card-header" @click="goToPage()">
						<view class="header-right">
							<view class="right-header">
								<view class="status" :class="item.state==='审核通过'?'status-success':''">{{item.state}}
								</view>
								<view class="info-title">
									<text class="value">资料内容 ：</text>
									<text class="label">{{item.cnt}} - ({{item.type}})</text>
								</view>
								<view class="info-title">
									<text class="value">申请患者：</text>
									<text class="label">{{item.name}}</text>
								</view>
								<view class="info-title">
									<text class="value">申请人 ：</text>
									<text class="label">{{item.apply}}</text>
								</view>
								<view class="info-title">
									<text class="value">申请时间 ：</text>
									<text class="label">{{item.time}}</text>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	import {
		mapGetters
	} from 'vuex'

	export default {
		components: {

		},
		data() {
			return {

				list: [{
						type: 1,
						name: "业务申请"
					}, {
						type: 2,
						name: "我的申请"
					},
					// {
					// 	type: 3,
					// 	name: "待取药"
					// }, {
					// 	type: 4,
					// 	name: "待收货"
					// },
				],
				numList: [{
					name: '业务申请'
				}, {
					name: '证件上传'
				}, {
					name: '申请信息'
				}, {
					name: '预付费用'
				}, ],
				applyList: [{
					name: '病历首页',
					active: false
				}, {
					name: '入院记录',
					active: false
				}, {
					name: '出院记录',
					active: false
				}, {
					name: '手术记录',
					active: false
				}, {
					name: '检验报告',
					active: false
				}, {
					name: '检查报告',
					active: false
				}, {
					name: '医嘱',
					active: false
				}, {
					name: '护理记录',
					active: false
				}, ],
				radioList: [{
					name: '本人办理'
				}, {
					name: '代理人办理'
				}],
				radioList2: [{
					name: '电子PDF'
				}, {
					name: '纸质复印'
				}],
				radioList3: [{
					name: '现场领取'
				}, {
					name: '邮寄'
				}],
				current: 0,
				type: 1,
				currpage: 1,
				relate: false,
				currRelate: '',
				currPassType: '',
				passType: false,
				day: 7,
				showPageOne: 1,
				orderList: [{
						name: '张磊',
						cnt: '病历首页',
						apply: '陈静',
						time: '2025-08-10 15:13:56',
						type: '邮寄',
						state: '邮寄中'
					},
					{
						name: '张磊',
						cnt: '出院记录',
						apply: '陈静',
						time: '2025-08-15 12:14:03',
						type: '自取',
						state: '审核通过'
					},
				],
				formInfo: {
					memo: '',
					relate: [{
						label: '本人',
						value: '01'
					}, {
						label: '患儿父母',
						value: '02'
					}],
					passType: [{
						label: '身份证',
						value: '01'
					}, {
						label: '户口簿',
						value: '02'
					}],

				}
			}
		},
		computed: {
			...mapGetters(['currentHospitalInfo'])
		},
		mounted() {

		},
		methods: {
			change(e) {

				this.current = e
				if (this.list[e].type == 1) {
					this.showPageOne = 1;

				}
				if (this.list[e].type == 2) {
					this.showPageOne = 2
				}

			},
			goToPage() {
				uni.navigateTo({
					url: '/pages/Home/ServePatient/MedicalRecordsEMSDetail'
				})
			},
			choiceActive(item) {
				item.active = !item.active
			},
			choice(type) {
				this.type = type
			},
			toNextPage(page) {
				this.currpage = page
			},
			confirm(e, key) {
				if (key === 'currPassType') {
					this.currPassType = e[0].label
				} else {
					this.currRelate = e[0].label

				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.register-payment-page {
		background: linear-gradient(#e0f3ff 0%, #fff 30%);
		min-height: 100vh;
		padding: 30rpx 20rpx 40rpx;
	}

	.choice-box {
		justify-content: space-around;
		align-items: center;
		padding-bottom: 10px;
	}

	.choice {
		display: inline-block;
		text-align: center;
		width: 145rpx;
		line-height: 65rpx;
		height: 65rpx;
		background-color: #E4FCFD;
		color: #2E6D78;
		border-radius: 55rpx;
		margin-top: 10px;
		margin-right: 10px;
	}

	.header-right {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.card-header {
		display: flex;
	}


	.label {
		width: 150rpx;
	}

	.time {
		width: 50%;
		float: right;
		display: inline-block;
	}

	.status {
		float: right;
		background: #eba242;
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		width: 130rpx;
		border-radius: 8rpx;
		padding: 4rpx 18rpx;
		right: 8rpx;
	}

	.status-success {
		background: #4ad49a !important;
	}

	.img-box {
		justify-content: space-around;
		align-items: center;
	}

	.eachimg {
		display: inline-block;
		width: 40%;
		margin: 2%;
	}

	.radio-item {
		text-align: right;
	}

	.active {
		background-color: #41CFE6;
		color: white;
	}

	.tip {
		color: #48aea8;
		background-color: #dff2f1;
	}


	.user-card {
		display: flex;
		align-items: center;
		background: linear-gradient(90deg, #F0FEFF 0%, #b6e0f7 85%, #F0FEFF 100%);
		border-radius: 16rpx 16rpx 0 0;
		padding: 32rpx 40rpx 24rpx;
		position: relative;
	}

	.avatar {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.user-info {
		flex: 1;
		margin-bottom: 10rpx;
	}

	.user-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #222;
	}

	.user-id {
		font-size: 24rpx;
		color: #666;
		margin-top: 8rpx;
	}

	.switch-user {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 6rpx;
		color: #1ec6e6;
		font-size: 24rpx;
	}

	.prcie {
		color: #F9423A;
	}

	.switch-icon {
		width: 38rpx;
		height: 38rpx;
		margin-right: 8rpx;
	}

	.section-card {
		background: #fff;
		border-radius: 16rpx;
		margin: 25rpx 0 0 0;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		padding: 24rpx 32rpx 18rpx 32rpx;

	}

	.textarea.result {
		height: 150rpx;
	}

	.btntip {
		width: 170rpx;
		display: inline-block;
		text-align: center;
		background: #f5f9ff;
	}

	.textarea {
		width: 94%;
		background: #f5f9ff;
		border-radius: 12rpx;
		padding: 18rpx;
		font-size: 26rpx;
		color: #333;
		margin-top: 8rpx;
		border: none;
	}

	.textarea-count {
		text-align: right;
		color: #bbb;
		font-size: 22rpx;
	}

	.payment-header {
		position: relative;
		margin-bottom: 18rpx;
	}

	.payment-title {
		position: relative;
		font-size: 32rpx;
		color: #333;
		z-index: 1;
	}

	.title-bg {
		position: absolute;
		width: 48rpx;
		height: 15rpx;
		background-color: rgba(65, 207, 230, 0.5);
		bottom: -4rpx;
		left: 20rpx;
		z-index: 0
	}

	.payment-row {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.label {
		color: #888;
		font-size: 28rpx;
	}

	.value {
		width: 130rpx;
		color: #333;
		flex: 1;
		font-size: 28rpx;
	}

	.dashed-divider {
		height: 1rpx;
		border-top: 1rpx dashed #e0e0e0;
		margin: 24rpx 0;
		width: 100%;
	}

	.payment-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 18rpx;
	}

	.amount {
		color: #e74c3c;
		font-size: 28rpx;
		flex: 1;
	}

	.amount-num {
		font-weight: bold;
		font-size: 30rpx;
	}

	.pay-btn {
		background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
		color: #fff;
		font-size: 28rpx;
		border-radius: 32rpx;
		padding: 0 38rpx;
		height: 56rpx;
		line-height: 56rpx;
		border: none;
		box-shadow: 0 2rpx 8rpx rgba(65, 207, 230, 0.15);
	}

	.pay-btn.disabled {
		background: #e5e5e5;
		color: #bbb;
		box-shadow: none;
	}

	.record-btn {
		width: 90%;
		margin: 60rpx 5% 0 5%;
		height: 88rpx;
		background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		box-shadow: 0 4rpx 12rpx rgba(65, 207, 230, 0.15);
		border: none;
	}
</style>